<template>
  <div ref="myChart"></div>
</template>

<script>
import themes from "./echartThemes/themes";
export default {
  name:'',
  components: {},
  data() {
    return {
      myChart: {},
    };
  },
  props: {
    options:{
      default:()=>{
        return {}
      }
    },
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.registerTheme();
    this.handleSetChart();
    const obs = new ResizeObserver((entries) => {
        this.handleResize();
    });
    obs.observe(this.$el.parentElement);
  },
  methods: {
    registerTheme() {
      this.echarts.registerTheme("dark", themes.dark);
      this.echarts.registerTheme("light", themes.light);
      this.echarts.registerTheme("vintage", themes.vintage);
      this.echarts.registerTheme("westeros", themes.westeros);
      this.echarts.registerTheme("essos", themes.essos);
      this.echarts.registerTheme("wonderland", themes.wonderland);
      this.echarts.registerTheme("walden", themes.walden);
      this.echarts.registerTheme("chalk", themes.chalk);
      this.echarts.registerTheme("infographic", themes.infographic);
      this.echarts.registerTheme("macarons", themes.macarons);
      this.echarts.registerTheme("roma", themes.roma);
      this.echarts.registerTheme("shine", themes.shine);
      this.echarts.registerTheme("purplePassion", themes.purplePassion);
    },
    handleSetChart() {
      this.myChart = this.echarts.init(this.$el, this.options.theme);
      this.myChart.setOption(this.options);
    },
    handleResize() {
      this.myChart.resize();
    },
  }
};
</script>
<style scoped>
</style>